<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>板块管理</title>
    <link rel="stylesheet" href="/leek_bbs/statics/yu-ui/js_css/yu.css">
    <link rel="stylesheet" href="/leek_bbs/statics/layui/css/layui.css">
    <style>

        a { color:blue; transition:0.5s; }
        a:hover { color:red; }
        .layui-layout-admin .layui-footer{
            left: 0px;
            width: 98%;
        }
    </style>

</head>
<body style="background-color: #F2F2F2">

<div class="layui-layout layui-layout-admin" id="hmc">

    <div style="background-color: #FFFFFF">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-brief" lay-filter="demo" lay-allowClose="true" >
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form>
                        <div class="layui-form-item marg" style="margin-left: -70px">
                            <div class="layui-inline">
                                <label class="layui-form-label layui-input-inline">条件查询:</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="plate_name" placeholder="板块名称..." name="title" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="text" id="plate_vest" name="plate_vest" placeholder="板块区域..." autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <button type="button" data-type="search" class="layui-btn layui-btn-warm layui-icon layui-icon-search">查询</button>
                                    <button type="reset" class="layui-btn layui-icon layui-icon-refresh-1 layui-btn-normal">重置</button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item marg">

                        </div>
                    </form>

                    <table class="layui-hide" id="plateTable" lay-filter="test"></table>

                    <!-- 自定义按钮 -->
                    <div style="display: none;" id="cellphoneToo">
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>增加</button>
                            <button type="button" class="layui-btn layui-btn-sm" lay-event="batchDelete"><i class="layui-icon">&#xe640;</i>批量删除</button>
                        </div>
                    </div>

                    <!-- 自定义操作按钮 -->
                    <div id="cellphoneBar" >
                        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
                        <a style="margin-left: 2px;" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <div align="center">
            © 凛冬 - 版权所有
        </div>
    </div>
</div>
<script src="/leek_bbs/statics/component/common_import.js"></script>
<script>
    let tableLoad;

    layui.use(['table','element','layer'], function(){
        let table = layui.table;
        let element = layui.element;
        let layer = layui.layer;

        //表格数据渲染必须函数
        tableLoad = table.render({
                elem: '#plateTable'	//表格操作对象
                ,url:'/leek_bbs/stair/plateManage/listRecords'	//数据接口
                //,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,toolbar: '#cellphoneToo'	//自定义表格上面左侧按钮
                , method: 'post'
                , contentType: 'application/json'
                ,defaultToolbar: ['filter', 'exports',
                /*'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可

              title: '提示'
              ,layEvent: 'LAYTABLE_TIPS'
              ,icon: 'layui-icon-tips'
            }*/]
                /*,width:800
                ,height:'full-300'*/
                ,height:540     //固定表格高度,当每页要显示的条数大于10条时,让它出现下拉框
                ,cellMinWidth:100	//设置列的最小默认宽度,拉伸时最小能缩小的宽度
                , request: {
                    pageName: 'pageNo' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                ,done:function(res,curr,count){
                }
                //,totalRow:true	//开启合并行,进行计算
                ,text:{
                    none:'暂无相关数据'//默认:无数据
                }
                ,page: true
                //,limit:20	//设置每页显示的条数,默认显示为10条
                ,limits:[10,20,30,40]	//每页显示条数选择下拉框
                ,title: '板块信息数据表'	//数据导出标题
                /*, parseData: function (res) {     //自定义分页接收数据
                    //LayUI数据格式-尤其注意
                    return {
                        "code": 0,
                        "msg": "",
                        "count": res.length,
                        "data": res
                    }
                }*/
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}	//复选框,多选
                    ,{field:'id', title:'ID',fixed: 'left', unresize: true, sort: true}//sort:已请求数据排序开启
                    ,{field:'plate_name', title:'板块名称'}	//edit:可编辑数据 align:center居中显示
                    ,{field:'plate_photo', title:'板块图片',height:'52',align:'center',
                        templet:function (d) {
                            return `<img src="/leek_bbs/statics/images/${d.plate_photo}" style="border-radius: 50%;" width="35" height="35">`
                        }
                    }
                    ,{field:'theme',title:'板块主题总数'}
                    ,{field:'posts', title:'板块帖子总数'}
                    ,{field:'plate_vest',title:'板块归属区'}
                    ,{fixed: 'right', title:'操作',width: 105, toolbar: '#cellphoneBar'}	//toolbar可使用默认提供按钮,也可自定义按钮
                ]]
                //,id: 'activeReload'     //重载标识

            });


        //表格重载
        let $ = layui.$, active = {
            search: function(){
                let plate_name = $('#plate_name').val();
                let plate_vest = $('#plate_vest').val();
                //执行重载
                table.reload('plateTable', {
                    url: '/leek_bbs/stair/plateManage/listRecords'
                    ,methods:"post"
                    ,request: {
                        page: 'pageNo' //页码的参数名称，默认：page
                        ,limit: 'pageSize' //每页数据量的参数名，默认：limit
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {       //可以传对象
                        'plate_name': plate_name,
                        'plate_vest': plate_vest
                    }
                }, 'data');
            }
        };
        //监听搜索按钮
        $('.layui-icon-search').on('click', function(){
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            let checkStatus = table.checkStatus(obj.config.id);
            let data = checkStatus.data;    //表格选中的数据
            console.log(obj.config);
            switch(obj.event){
                case 'add':
                    openAddPlate();
                    break;
                case 'batchDelete':
                    //layer.msg('选中了：'+ data.length + ' 个');
                    if (data.length > 0){
                        let ids = new Array(data.length);
                        for (let i in data) {
                            let id = data[i].id;
                            ids[i] = id;
                        }
                        ui.confirm('确定删除吗?', function(z){
                            if (z){
                                deletePlate(ids);
                            }
                        });
                    } else {
                        ui.alert("请选择您要删除的数据",1500,false);
                    }

                    break;
                /*case 'isAll':
                  layer.msg(checkStatus.isAll ? '全选': '未全选');
                break;*/

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听单元格编辑事件
        table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            let data = obj.data;
            let ids = [];
            //console.log(obj)
            if(obj.event === 'del'){
                ui.confirm('确定删除这条数据吗', function(z){
                    ids[0] = data.id;
                    if(z){
                        deletePlate(ids);
                    }

                });
            } else if(obj.event === 'edit'){
                openAddPlate(data);
            }
        });


        //添加板块窗口方法
        function openAddPlate(data) {
            let index = layer.open({
                type:1
                ,title:false
                ,content:`<div id="lay-add-plate" style="margin-top: 30px;">
                            <form class="layui-form" lay-filter="aadPlateForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">板块名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="plateName" width="120%" name="plate_name" lay-verify="required" autocomplete="off" placeholder="请输入板块名称..." class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">板块专区</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="plateVest" width="120%" name="plate_vest" placeholder="请输入板块专区..." lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">图片路径</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="plate_photo" width="120%" name="plate_photo" placeholder="板块图片路径..." lay-verify="required" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                        </form>
                        </div>`
                ,area:["50%","42%"]
                ,btn: ['提交', '取消']
                ,yes: function(index, layero){
                    let plate_name = $("#plateName").val();
                    let plate_vest = $("#plateVest").val();
                    let plate_photo = $("#plate_photo").val();
                    if (plate_name == '' || plate_name.length > 8) {
                        layer.msg('板块不能为空,长度不能大于8个字符',{icon: 5,time: 1500});
                    } else if (plate_vest == '' || plate_vest.length > 12) {
                        layer.msg('板块专区不能为空,长度不能大于12个字符',{icon: 5,time: 1500});
                    } else if (plate_photo == '') {
                        layer.msg('图片路径不能为空',{icon: 5,time: 1500});
                    }else {
                        if (data != null){
                            alterPlateMethod(data.id,plate_name,plate_vest,plate_photo,index);
                        } else {
                            addPlateMethod(plate_name,plate_vest,plate_photo,index);
                        }


                    }

                }
                ,btn2: function(index, layero){

                },
                success: function(layero, index){
                    if (data != null){
                        $("#plateName").val(data.plate_name);
                        $("#plateVest").val(data.plate_vest);
                        $("#plate_photo").val(data.plate_photo);
                    }
                }
            })
        }

        //增加板块请求方法
        function addPlateMethod(plate_name,plate_vest,plate_photo,index) {
            axios.post('/leek_bbs/stair/plateManage/addPlate',{
                plate_name:plate_name,
                plate_vest:plate_vest,
                plate_photo:plate_photo
            }).then(response => {
                let data = response.data;
                if (data.msg == "success"){
                    layer.close(index);
                    ui.success("添加成功",1500,false);
                    tableLoad.reload();
                } else if (data.code == "500036") {
                    layer.close(index);
                    ui.alert(data.msg,1500,false);
                } else if (data.code == "500037") {
                    layer.msg(data.msg);
                } else {
                    ui.error(data.msg,1500,false);
                }
            }).catch(error => {
                layer.msg("系统出现了一个未知异常");
            })
        }

        //修改板块请求方法
        function alterPlateMethod(id,plate_name,plate_vest,plate_photo,index) {
            axios.post('/leek_bbs/stair/plateManage/alterPlate',{
                id:id,
                plate_name:plate_name,
                plate_vest:plate_vest,
                plate_photo:plate_photo
            }).then(response => {
                let data = response.data;
                if (data.msg == "success"){
                    layer.close(index);
                    ui.success("修改成功",1500,false);
                    tableLoad.reload();
                } else if (data.code == "500036") {
                    layer.close(index);
                    ui.alert(data.msg,1500,false);
                } else if (data.code == "500037") {
                    layer.msg(data.msg);
                } else {
                    ui.error(data.msg,1500,false);
                }
            }).catch(error => {
                layer.msg("系统出现了一个未知异常");
            })
        }
    });

    //批量删除数据或删除单行数据
    function deletePlate(ids) {
        axios.post('/leek_bbs/stair/plateManage/removePlate',ids).then((res) => {
            let data = res.data;
            if (data.code == "500020"){
                ui.success("删除成功",1500,false);
                tableLoad.reload();
            }else if (data.code == "500037") {
                layer.msg(data.msg);
            }else{
                ui.alert(data.msg,1500,false);
            }
        }).catch(function (error) {
            ui.alert("请求异常",1500,false);
            console.log(error);
        });

    }


</script>

</body>
</html>